<template>
  <div class="homeMain">
    <el-row :gutter="10" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="display:inline-block;line-height:28px">企业信息</span>
            <el-button v-if="userInfo.isAdmin == 1" v-permiss="['92901030']" type="primary" style="float: right;" size="mini" round @click="showCompile">编辑</el-button>
            <el-button v-if="userInfo.isAdmin == 1 && isCloseAccount" v-permiss="['92901010']" type="danger" style="float: right;margin-right:10px" size="mini" round @click="closeCurAccount">注销企业</el-button>
          </div>
          <div class="listItem">
            <label>企业代码:</label>
            {{ managementInfo.orgCode }}
          </div>
          <div class="listItem">
            <label>企业名称:</label>
            {{ managementInfo.orgName }}
          </div>
          <div class="listItem">
            <label>所属行业:</label>
            {{ managementInfo.industryName }}
          </div>
          <div class="listItem">
            <label>企业所在地:</label>
            {{ managementInfo.areaName }}
          </div>
          <div class="listItem">
            <label>详细地址:</label>
            {{ managementInfo.invoiceAddr }}
          </div>
          <div class="listItem">
            <label>纳税类型:</label>
            {{ managementInfo.taxFilingCategoryName }}(纳税识别号:{{ managementInfo.taxRegistrationCertificateNo }})
          </div>
          <div class="listItem">
            <label>开户行:</label>
            {{ managementInfo.bankAccount ? managementInfo.bankName + '(' + managementInfo.bankAccount +')' : '未开户' }}
            <el-tooltip class="item" effect="dark" content="开户行和开户行账号" placement="bottom">
              <i class="el-icon-question" />
            </el-tooltip>
          </div>
          <div class="listItem">
            <label>资源容量:</label>
            {{ managementInfo.cosResSize | Fixed }}GB (已使用{{ managementInfo.cosResUsedSize | Fixed }}GB)
            <el-tooltip class="item" effect="dark" content="图片存储额度及使用量（每日更新一次使用量）" placement="bottom">
              <i class="el-icon-question" />
            </el-tooltip>
          </div>
          <div class="listItem" style="color:#F56C6C">
            <label>试用期:</label>
            {{ managementInfo.bizExpirationDate }}
            <el-tooltip class="item" effect="dark" content="注册后面试用期限" placement="bottom">
              <i class="el-icon-question" />
            </el-tooltip>
          </div>
          <div class="listItem" style="color:#F56C6C">
            <label>账号月数:</label>
            {{ managementInfo.lisenseNum+managementInfo.lisenseNum1 }}(购买{{ managementInfo.lisenseNum }}，赠送{{ managementInfo.lisenseNum1 }})
            <el-tooltip class="item" effect="dark" content="您还能使用的月数" placement="bottom">
              <i class="el-icon-question" />
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="display:inline-block;line-height:28px">用户信息</span>
            <el-button v-if="userInfo.isAdmin == 1 && isCleanBook" v-permiss="['92901020']" type="danger" style="float: right;" round size="mini" @click="resetBookInfo">清除账套</el-button>
          </div>
          <div class="listItem">
            <label>企业代码:</label>
            {{ userInfo.orgCode }}
          </div>
          <div class="listItem">
            <label>用户账号:</label>
            {{ userInfo.userAccount }}
          </div>
          <div class="listItem">
            <label>用户名:</label>
            {{ userInfo.userName }}
          </div>
          <div class="listItem">
            <label>审核人签名:</label>
            {{ userInfo.sign2 }}
            <el-tooltip class="item" effect="dark" content="审核凭证时审核人签名，默认与用户名相同" placement="bottom">
              <i class="el-icon-question" />
            </el-tooltip>
          </div>
          <div class="listItem">
            <label>手机号:</label>
            {{ userInfo.mobile }}
          </div>
          <div class="listItem">
            <label>邮箱:</label>
            {{ userInfo.mail }}
          </div>
          <div class="listItem">
            <label>管理员:</label>
            {{ userInfo.isAdmin == 1?'是':'否' }}
          </div>
          <div class="listItem">
            <label style="width:100px">单据查询权限:</label>
            {{ userInfo.queryType == 0?'自己':'部门' }}
          </div>
          <div class="listItem">
            <label style="width:100px">APP小程序:</label>
            {{ userInfo.loginAppType == 0?'禁止':userInfo.loginAppType == 1?'销售':userInfo.loginAppType == 2?'库管':userInfo.loginAppType == 3?'老板':'' }}
          </div>
          <div class="listItem">
            <label>角色:</label>
            {{ userInfo.roleName }}
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col" style="margin-top:10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="display:inline-block;line-height:28px">用户管理</span>
            <el-button v-if="userInfo.isAdmin == 1" v-permiss="['92901060']" type="primary" style="float: right;" round size="mini" @click="handleAdd">新增用户</el-button>
            <el-button v-if="userInfo.isAdmin == 1" v-permiss="['92901050']" type="primary" style="float: right;margin-right:15px" round size="mini" @click="handleKill">强制下线所有用户</el-button>
          </div>
          <el-table :data="tableData" border fit resize>
            <el-empty slot="empty" :image-size="120" />
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="用户账号" prop="userAccount" min-width="60" align="center" />
            <el-table-column label="用户名" prop="userName" min-width="60" align="center" />
            <el-table-column label="登录类型" prop="loginType" width="84" align="center">
              <template slot-scope="{row}">
                <span>{{ row.loginType == '*' ? '全部' : row.loginType == '0' ? 'App' : row.loginType == '1' ? '浏览器' : row.loginType == '2' ? '平台' : row.loginType == '9' ? '第三方接口' : '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="在线" width="66" align="center">
              <template slot-scope="{row}">
                <span>{{ row.isOnline == 1 ? '是' : '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="管理员" min-width="60" align="center">
              <template slot-scope="{row}">
                <span>{{ row.isAdmin == 1 ? '是' : '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="APP/小程序" min-width="100" align="center">
              <template slot-scope="{row}">
                <el-radio-group v-model="row.loginAppType" @change="appChange($event, row.id)">
                  <el-radio :label="0">禁止</el-radio>
                  <el-radio :label="1">销售</el-radio>
                  <el-radio :label="2">库管</el-radio>
                  <el-radio :label="3">老板</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="60" align="center">
              <template slot-scope="{row}">
                <span>{{ row.status == 0 ? '正常' : row.status == 5 ? '受限':'禁用' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="170" align="center">
              <template slot-scope="{row}">
                <el-button v-permiss="['92901070']" type="text" size="small" @click="handleCompile(row)">编辑</el-button>
                <el-button v-if="userInfo.isAdmin == 1 && userInfo.id != row.id" type="text" size="small" @click="resetPsw(row)">重置密码</el-button>
                <el-button v-if="userInfo.isAdmin == 1 && userInfo.id != row.id && row.isOnline == 1" v-permiss="['92901090']" type="text" size="small" @click="showOffline(row)">强退</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :close-on-click-modal="false" title="修改企业信息" :visible.sync="dialogVisible1" width="640px">
      <el-form ref="dataForm" :rules="rules1" :model="temp1" label-position="right" size="small" label-width="100px" inline style="width: 600px;">
        <el-form-item label="企业代码" prop="orgCode" required>
          <el-input v-model="temp1.orgCode" disabled placeholder="企业代码" />
        </el-form-item>
        <el-form-item label="企业名称" prop="orgName">
          <el-input v-model="temp1.orgName" placeholder="企业名称" />
        </el-form-item>
        <el-form-item label="企业所在地" prop="areaId">
          <el-select v-model="temp1.areaId" style="width:185px">
            <el-option v-for="item in areaList" :key="item.areaCode" :label="item.areaName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="invoiceAddr">
          <el-input v-model="temp1.invoiceAddr" placeholder="详细地址" />
        </el-form-item>
        <el-form-item label="行业类别" prop="industryId">
          <el-select v-model="temp1.industryId" style="width:185px">
            <el-option v-for="item in industryList" :key="item.id" :label="item.industryName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="纳税类型" prop="taxFilingCategoryId">
          <el-select v-model="temp1.taxFilingCategoryId" style="width:185px">
            <el-option v-for="item in taxfillingcategoryList" :key="item.id" :label="item.taxFilingCategoryName" :value="item.taxFilingCategoryCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxRegistrationCertificateNo">
          <el-input v-model="temp1.taxRegistrationCertificateNo" placeholder="纳税人识别号" />
        </el-form-item>
        <el-form-item label="开户行" prop="bankName">
          <el-input v-model="temp1.bankName" placeholder="开户行" />
        </el-form-item>
        <el-form-item label="开户行账号" prop="bankAccount">
          <el-input v-model="temp1.bankAccount" placeholder="开户行账号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveManageInfo()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="dialogStatus=='create'?'新增用户':'编辑用户'" :visible.sync="dialogVisible2" width="640px">
      <el-form ref="dataForm1" :rules="rules2" inline :model="temp2" label-position="right" label-width="85px" style="width: 600px; margin-left:10px;">
        <el-form-item label="用户账号" prop="userAccount" style="margin-right:20px">
          <el-input v-model="temp2.userAccount" placeholder="用户账号" />
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="temp2.userName" placeholder="用户名" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" style="margin-right:20px">
          <el-input v-model="temp2.mobile" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="mail">
          <el-input v-model="temp2.mail" placeholder="邮箱" />
        </el-form-item>
        <el-form-item label="审核人签名" prop="sign2" style="margin-right:20px">
          <el-tooltip class="item" effect="dark" content="审核凭证时审核人签名，默认与用户名相同" placement="bottom">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-input v-model="temp2.sign2" style="width:164px" placeholder="审核人签名" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="temp2.roleId" style="width:185px" :disabled="userInfo.isAdmin == 0">
            <el-option v-for="v in rolelist" :key="v.id" :label="v.roleName" :value="v.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="dialogStatus=='create'" label="密码" prop="password" style="margin-right:20px">
          <el-input v-model="temp2.password" type="password" placeholder="密码" />
        </el-form-item>
        <el-form-item v-if="dialogStatus=='create'" label="确认密码" prop="againPassword">
          <el-input v-model="temp2.againPassword" type="password" placeholder="确认密码" />
        </el-form-item>
        <el-form-item label="员工" prop="staffId" style="margin-right:20px">
          <el-select v-model="temp2.staffId" style="width:185px" :disabled="userInfo.isAdmin == 0">
            <el-option v-for="item in staffList" :key="item.id" :value="item.id" :label="item.staffName" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="temp2.status" style="width:185px" :disabled="userInfo.isAdmin == 0">
            <el-option :value="0" label="正常" />
            <el-option :value="5" label="受限" />
            <el-option :value="9" label="禁用" />
          </el-select>
        </el-form-item>
        <el-form-item label="单据查询权限" prop="queryType" label-width="100px" style="margin-right:55px">
          <el-tooltip class="item" effect="dark" content="查询自己的单据还是查询本部门的单据" placement="bottom">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-radio v-model="temp2.queryType" :label="0" :disabled="userInfo.isAdmin == 0">自己</el-radio>
          <el-radio v-model="temp2.queryType" :label="1" :disabled="userInfo.isAdmin == 0">部门</el-radio>
        </el-form-item>
        <el-form-item label="管理员" label-width="60px" prop="isAdmin">
          <el-tooltip class="item" effect="dark" content="管理员没有权限限制，谨慎设置" placement="bottom">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-radio v-model="temp2.isAdmin" :label="1" :disabled="userInfo.isAdmin == 0">是</el-radio>
          <el-radio v-model="temp2.isAdmin" :label="0" :disabled="userInfo.isAdmin == 0">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="handleSave()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="重置密码" :visible.sync="dialogVisible3" width="400px">
      <el-form ref="dataForm3" :rules="rules3" :model="pswForm" label-position="left" label-width="96px">
        <el-form-item label="新密码" prop="password">
          <el-input v-model="pswForm.password" type="password" placeholder="新密码" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="againPassword">
          <el-input v-model="pswForm.againPassword" type="password" placeholder="确认新密码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="savePsw">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="选择登录类型" :visible.sync="dialogVisible4" width="360px">
      <el-form class="radioDiv" label-width="80px">
        <el-form-item label="登录类型">
          <el-radio-group v-model="loginType" style="padding-top:10px">
            <el-radio label="*">全部</el-radio>
            <el-radio label="0">App</el-radio>
            <el-radio label="1">浏览器</el-radio>
            <el-radio label="2">平台</el-radio>
            <el-radio label="9">第三方接口</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="default" @click="dialogVisible4 = false">取消</el-button>
        <el-button type="primary" @click="offLine()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getmanagementInfo, getMapById, getUserList, registerLoadArea, registerLoadIndustry, registerLoadTaxfilingcategory, getCloseAccountStatus, getCleanBookStatus } from '@/api/user'
import { updateInfo, closeAccount, resetBook, saveUser, updatePSW, getRole, killUser, killAllUser, updateLoginAppType } from '@/api/user'
import { getStaff } from '@/api/basedata'
export default {
  name: 'AccountInfo',
  filters: {
    Fixed: function(num) {
      if (!num) {
        return '0.00'
      }
      return parseFloat(num).toFixed(2)
    }
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      const rep = new RegExp('(^1[3|4|5|6|7|8|9]\\d{9}$)')
      if (value === '') {
        callback(new Error('请输入登录手机号!'))
      } else if (!rep.test(value)) {
        callback(new Error('手机号格式不正确！'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogStatus: 'create',
      managementInfo: {},
      staffList: [],
      rolelist: [],
      userInfo: {},
      temp1: {},
      rules1: {
        orgName: [
          { required: true, message: '企业全称不能为空', trigger: 'change' }
        ],
        areaId: [
          { required: true, message: '请选择企业所在地', trigger: 'change' }
        ],
        industryId: [
          { required: true, message: '请选择行业类别', trigger: 'change' }
        ],
        taxFilingCategoryId: [
          { required: true, message: '请选择纳税类型', trigger: 'change' }
        ]
      },
      rules2: {
        password: [
          { required: true, message: '密码不能为空', trigger: 'change' }
        ],
        againPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'change' }
        ],
        userAccount: [
          { required: true, message: '用户账号不能为空', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'change' }
        ],
        mobile: [
          { required: true, trigger: 'blur', validator: validateMobile }
        ]
      },
      pswForm: {
        id: '',
        oldPsw: '',
        password: '',
        againPassword: ''
      },
      rules3: {
        oldPsw: [
          { required: true, message: '原密码不能为空', trigger: 'change' }
        ],
        password: [
          { required: true, message: '新密码不能为空', trigger: 'change' }
        ],
        againPassword: [
          { required: true, message: ' 确认新密码不能为空', trigger: 'change' }
        ]
      },
      temp2: {
        id: '',
        userAccount: '',
        userName: '',
        sign2: '',
        mobile: '',
        mail: '',
        bankName: '',
        bankAccount: '',
        roleId: '',
        password: '',
        againPassword: '',
        isAdmin: 0,
        queryType: 0,
        staffId: '',
        status: 0,
        loginAppType: 0
      },
      resetform2: {
        id: '',
        userAccount: '',
        userName: '',
        sign2: '',
        mobile: '',
        mail: '',
        bankName: '',
        bankAccount: '',
        roleId: '',
        password: '',
        againPassword: '',
        isAdmin: 0,
        queryType: 0,
        staffId: '',
        status: 0,
        loginAppType: 0
      },
      userList: {},
      tableData: [],
      industryList: [],
      taxfillingcategoryList: [],
      areaList: [],
      isCloseAccount: false,
      isCleanBook: false,
      loginType: '',
      userId: '',
      dialogVisible4: false
    }
  },
  mounted() {
    getCloseAccountStatus().then((res) => {
      if (res.data.errorCode === '0') {
        this.isCloseAccount = true
      }
    })
    getCleanBookStatus().then((res) => {
      if (res.data.errorCode === '0') {
        this.isCleanBook = true
      }
    })
    this.getData1()
    this.getData2()
    this.getData3()
    registerLoadArea().then((res) => {
      this.areaList = res.data.data
    })
    registerLoadIndustry().then((res) => {
      this.industryList = res.data.data
    })
    registerLoadTaxfilingcategory().then((res) => {
      this.taxfillingcategoryList = res.data.data
    })
    getStaff().then((res) => {
      this.staffList = res.data.data
    })
    getRole({ page: 1 }).then((res) => {
      this.rolelist = res.data.data
    })
  },
  methods: {
    closeCurAccount() {
      this.$confirm('该操作将清除所有的企业数据，请确认！', '警告', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$confirm('该操作将清除所有的企业数据，请再确认一次！', '警告', {
          confirmButtonText: '确定',
          closeOnClickModal: false,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          closeAccount({}).then((res) => {
            if (res.data.errorCode === '0') {
              this.$message.success(res.data.msg)
              this.$store.dispatch('user/logout').then(() => {
                this.$router.replace('/login')
              })
            }
          })
        })
      })
    },
    resetBookInfo() {
      this.$confirm('该操作将清除所有的账套数据，请确认！', '警告', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$confirm('该操作将清除所有的账套数据，请再确认一次！', '警告', {
          confirmButtonText: '确定',
          closeOnClickModal: false,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetBook({}).then((res) => {
            if (res.data.errorCode === '0') {
              this.$message.success(res.data.msg)
              this.$store.dispatch('user/logout').then(() => {
                this.$router.replace('/login')
              })
            }
          })
        })
      })
    },
    showOffline(row) {
      this.userId = row.id
      this.loginType = '*'
      this.dialogVisible4 = true
    },
    offLine() {
      const userId = this.userId
      const loginType = this.loginType
      killUser({ userId, loginType }).then((res) => {
        if (res.data.errorCode === '0') {
          this.$message.success(res.data.msg)
          this.dialogVisible4 = false
          this.getData3()
        }
      })
    },
    appChange(val, id) {
      updateLoginAppType(val, id).then((res) => {
        this.getData3()
        if (res.data.errorCode === '0') {
          this.$message.success(res.data.msg)
        }
      })
    },
    handleKill() {
      this.$confirm('所有用户将被踢下线(如果用户没被禁用,还可重新登录)!', '警告', {
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        killAllUser().then((res) => {
          if (res.data.errorCode === '0') {
            this.$message.success(res.data.msg)
          }
        })
      })
    },
    saveManageInfo() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          updateInfo(this.temp1).then((res) => {
            if (res.data.errorCode === '0') {
              this.$message.success(res.data.msg)
              this.getData1()
              this.dialogVisible1 = false
            }
          })
        }
      })
    },
    showCompile() {
      this.dialogVisible1 = true
      this.temp1 = this.managementInfo
    },
    handleCompile(row) {
      for (var key in this.temp2) {
        this.temp2[key] = row[key]
      }
      this.dialogVisible2 = true
      this.dialogStatus = 'update'
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
      })
    },
    handleAdd() {
      for (var key in this.temp2) {
        this.temp2[key] = this.resetform2[key]
      }
      this.dialogVisible2 = true
      this.dialogStatus = 'create'
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
      })
    },
    resetPsw(row) {
      this.dialogVisible3 = true
      for (var key in this.pswForm) {
        this.pswForm[key] = ''
      }
      this.pswForm.id = row.id
    },
    savePsw() {
      this.$refs['dataForm3'].validate((valid) => {
        if (valid) {
          updatePSW(this.pswForm).then((res) => {
            if (res.data.errorCode === '0') {
              this.dialogVisible3 = false
              this.$message.success(res.data.msg)
            }
          })
        }
      })
    },
    handleSave() {
      this.$refs.dataForm1.validate((valid) => {
        if (valid) {
          if (this.dialogStatus === 'create' && this.temp2.password != this.temp2.againPassword) {
            this.$message.warning('请确保两次密码输入一致')
            return
          }
          saveUser(this.temp2).then(res => {
            if (res.data.errorCode === '0') {
              this.$message.success(res.data.msg)
              this.getData3()
              this.dialogVisible2 = false
            }
          })
        }
      })
    },
    getData1() {
      getmanagementInfo().then((res) => {
        if (res.data.errorCode === '0') {
          this.managementInfo = res.data.data[0] || {}
        }
      })
    },
    getData2() {
      var obj = {
        id: null
      }
      getMapById(obj).then((res) => {
        if (res.data.errorCode === '0') {
          this.userInfo = res.data.data[0] || {}
        }
      })
    },
    getData3() {
      getUserList().then((res) => {
        this.tableData = res.data.data || []
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.homeMain {
  padding: 10px 10px 0;
  background-color: rgb(240, 242, 245);
  position: relative;
}

/deep/.el-card__header {
  padding: 10px 15px;
}

/deep/.el-card__body {
  padding: 10px 20px 15px;
}
</style>
<style scoped>
.listItem {
  height: 36px;
  line-height: 36px;
  border-bottom: 1px #eee solid;
  font-size: 14px;
  color: #333;
}
.radioDiv .el-radio{
  display: block;
  margin-bottom: 10px;
}

.listItem:last-child {
  border-bottom: none;
}

.listItem label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  width: 80px;
}
</style>
